<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <style>
        .aui-row-padded [class*=aui-col-xs-]{padding: 0.25rem}
        .aui-ellipsis-1{height: 1.2rem}
        .videoarea .actor-details {
          width:97%;
          height: 5rem;
          margin: 0 0.2rem;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .videoarea .actor-details .touxiang {
          width: 2rem;
          height: 2rem;
          border-radius: 50%;
          display: flex;
          align-items: left;
          justify-content: center;
        }
        .videoarea .actor-details .touxiang img {
          width: 2rem;
          height: 2rem;
          border-radius: 50%;
        }
        .videoarea .details {
          color: white;
          width: 85%;
        }
        .videoarea .details .introduce {
          width: 100%;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          font-size: 14px;　
        }
        .videoarea .swiper{
          width: 95%;
          height: 9rem;
        }
        .videoarea .swiper-wrapper {
          width: 100%;
          margin: 0 auto;
        }
        .videoarea .swiper-slide {
          width: 25%;
          color: white;
          position: relative;
        }
        .videoarea .swiper-slide img {
          width: 100%;
          height: 6rem;
          border-radius: 5px;
        }
        .videoarea .swiper-slide p{
          width: 100%;
          height: 1.5rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: white;
          line-height: 1.5rem;
        }
        .videoarea .swiper-slide span {
          position: absolute;
          right: 0.3rem;
          bottom: 1.54rem;
        }
      </style>
  </head>
  <body style="background-color: #fff;">
      <a href="javascript:window.location.reload();" style="width: 3rem;height: 3rem;position: fixed;bottom: 2rem;right: 0.5rem;z-index: 9999;background: url(../image/sx.png) no-repeat 0px 0px;" ></a>

      <section class="aui-content aui-margin-5" id="channellist">
        <div class="main">
            
            <ul class="liebiao">
			 <input type="hidden" value="0" id="nextrow" />
              <li v-for="v in it" style="height:6rem;padding: 0.3rem 0px;">
                <img :src="v.img" alt="" style="border-radius:5rem;width:3rem;height:3rem;" @click="openWin('listy_win', {title:v.title})">
                <i  @click="openWin('listy_win', {title:v.title})" style="color:#000;">{{v.title}}</i>
				<i style="border:1px solid #F683A2;border-radius:5rem;padding:0.1rem 0px;font-size: 0.5rem;color:#F683A2;" @click="openshou(v.id)">取消收藏</i>
              </li>
            </ul>
        </div>
      </section>
    

  </body>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript" src="../script/common.js"></script>
  <script type="text/javascript" src="../script/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="../script/vue.js"></script>
  <script type="text/javascript" src="../script/echo.js"></script>
  <script type="text/javascript">
   var api_url = localStorage.getItem('api_url');
      apiready = function(){
         rebo();
		 api.addEventListener({
          name: 'newLoingdata'
      }, function(ret, err) {
        if (ret) {

          rebo();
          location.reload();
        }
      });
		 if (localStorage.getItem('user_id')<1) {
		  api.toast({
				msg: '(ｷ｀ﾟДﾟ´)!!    你还没登陆！',
				duration: 2000
			});
		   api.openWin({
			   name: 'login',
			   url: './login.html',
			   delay: 1000
		   });
		   return;
		 }
		/*api.setCustomRefreshHeaderInfo({
              bgColor : '#fff',
          }, function() {
              //下拉刷新被触发，自动进入加载状态，使用 api.refreshHeaderLoadDone() 手动结束加载中状态
		 rebo();	
              setTimeout(function(){
					api.refreshHeaderLoadDone()
              }, 2000);
          });*/
		}
		function rebo(){
	   var channellist = new Vue({
              el: '#channellist',
              data: {
                  it: [],
                  offset: 0,
                  loader: '正在加载更多...'
              },
              mounted: function(){
                  this.add(); //初始化
                  loadMore(function(){channellist.add()}); //下拉加载
              },
              updated: function(){
                  echo.init({offset: 500, throttle: 0}); //图片懒加载
              },
              methods: {
                  add: function(){
                   var nextrow=$("#nextrow").val(); 
                       api.ajax({
							  url: api_url+'/App/App/shouy.html',
							  method: 'get',
							   data: {  
											values: {  
												nextrow: nextrow,
												uid: localStorage.getItem('user_id'),
												}
										}
								  },function(ret, err){
									  if (ret) {
										//console.log(JSON.stringify(ret))
										
										if (ret.code == 1) {
										channellist.offset += nextrow;
										channellist.it = channellist.it.concat(ret.msg);
										$("#nextrow").val(parseInt(nextrow)+10);
											
									}else if (ret.code == 0){
									api.toast({
										msg: ret.msg,
										duration: 2000
									});
									}

							 }      
							});
						  },
					  }
				  });
			}
			
	
	function openshou(id){
			api.ajax({
				  url: api_url+'/App/Index/qushou.html',
				  method: 'get',
				  data:{
					values:{
						id:id,
					}
				  }
			  },function(ret,err){
				  if (ret) {
					 if(ret.code == 0 ){
						api.toast({
							msg: ret.msg,
							duration: 1000
						});
					 }else if(ret.code == 1){
						 api.toast({
							msg: ret.msg,
							duration: 1000
						});
						window.location.reload();
					 }
				}
		  });
	}
  </script>
  </html>
